<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div
    class="Mall4j banner-container"
    :style="{width: config.size +'px'}"
  >
    <el-carousel
      :height="config.height+'px'"
      :indicator-position="config.showPage === 0 ? '' : 'none'"
    >
      <el-carousel-item
        v-for="(item, index) in config.imgList"
        :key="index"
      >
        <el-image
          :src="checkFileUrl(item.img)"
          fit="fill"
          @click="hanldeClick(item)"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import { redirectPath } from '../common/pageConfig.js'

const props = defineProps({
  itemComponent: {
    type: Object,
    default: () => {}
  }
})

const config = ref({
  imglist: [],
  showPage: 0,
  height: 0,
  size: 1200
})

watch(() => props.itemComponent, (newVal) => {
  if (JSON.stringify(newVal.rightConfigMessage) !== '{}') {
    config.value = {
      imgList: newVal.rightConfigMessage.picList,
      showPage: newVal.rightConfigMessage.pageation, // 0表示展示，1表示不展示
      height: newVal.rightConfigMessage.height,
      size: newVal.rightConfigMessage.size === 1920 ? '100%' : 1200
    }
  }
}, { immediate: true, deep: true })

const router = useRouter()
// 点击
const hanldeClick = (item) => {
  redirectPath(router, item)
}

</script>
<style lang="scss" scoped>
.banner-container {
  margin: 0 auto;
  &:deep(.el-image) {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

</style>
